<template>
  <el-card class="box-card">
    <el-row justify="space-between">
      <el-col :span="12">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="searchForm.subjectName" placeholder="学科名称" />
          </el-form-item>
          <el-form-item>
            <el-button @click="delSearch">清除</el-button>
            <el-button type="primary" @click="onSearch(searchForm)">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="3">
        <el-button type="success" :icon="EditPen" @click="addDialogVisible = true">新增学科</el-button>
      </el-col>
    </el-row>
    <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon :closable="false" class="mb-3" />
    <el-table :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="subjectName" label="学科名称" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column prop="addDate" label="创建日期">
        <template #default="{row}">
          {{parseTimeByString(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="isFrontDisplay" label="前台是否显示" width="80" />
      <el-table-column prop="twoLevelDirectory" label="二级目录" />
      <el-table-column prop="tags" label="标签" />
      <el-table-column prop="totals" label="题目数量" />
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="categoryRow(scope.row)">
            学科分类
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="tagRow(scope.row)">
            学科标签
          </el-button>
          <el-button link type="success" size="small" @click.prevent="editRow(scope.row)">
            修改
          </el-button>
          <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-3">
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        background layout=" sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-card>
  <!-- 修改学科弹框 -->
  <el-dialog v-model="editDialogVisible" title="修改学科" width="30%" align-center>
    <div>
      <el-form :model="editForm" ref="editFormRef" label-width="80px" :inline="false" size="normal">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="editForm.subjectName" />
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch v-model="editForm.isFrontDisplay" />
        </el-form-item>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editSubmit(editForm)">确认</el-button>
      </el-form>
    </div>
  </el-dialog>
  <!-- 新增学科弹框 -->
  <el-dialog v-model="addDialogVisible" title="新增学科" width="30%" align-center>
    <div>
      <el-form :model="addForm" ref="addFormRef" label-width="80px" :inline="false" size="normal">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="addForm.subjectName" />
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch v-model="addForm.isFrontDisplay" />
        </el-form-item>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addSubmit(addForm)">确认</el-button>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { parseTimeByString } from '@/filters/index'
import { EditPen } from '@element-plus/icons-vue'
import { onMounted, reactive, toRefs } from 'vue'
import { list, remove, update, add } from '@/api/hmmm/subjects'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup () {
    const state = reactive({
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      editDialogVisible: false,
      addDialogVisible: false,
      editForm: {
        id: '',
        subjectName: '',
        isFrontDisplay: true
      },
      addForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      searchForm: {
        subjectName: ''
      },
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示的条目个数
      total: 0 // 总条目数
    })

    const router = useRouter()
    const route = useRoute()
    // 方法
    // 搜索
    const onSearch = (val) => {
      // console.log(val)
      getList(val)
    }
    const delSearch = () => {
      state.searchForm.subjectName = ''
      getList()
    }
    // 修改按钮
    const editRow = (row) => {
      state.editForm.id = row.id
      state.editForm.subjectName = row.subjectName
      state.editForm.isFrontDisplay = row.isFrontDisplay === 1
      state.editDialogVisible = true
    }
    // 提交修改
    function editSubmit (val) {
      editSubject(val)
      state.editDialogVisible = false
    }
    // 学科修改
    async function editSubject (val) {
      const { data } = await update(val)
      if (data.success) {
        ElMessage.success('修改成功!')
      } else {
        ElMessage.error('修改失败!')
      }
      getList()
    }

    // 获取学科列表
    async function getList (val) {
      const { data } = await list(val)
      state.tableData = data.items
      state.total = data.counts
      // console.log(data)
    }

    // 删除按钮
    const deleteRow = (row) => {
      delSubject(row)
    }
    // 学科删除
    function delSubject (val) {
      ElMessageBox.confirm(
        '您确定要删除该内容吗？',
        '警告',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const { data } = await remove(val)
          if (data.success) {
            ElMessage.success('删除成功!')
            getList()
          } else {
            ElMessage.error('删除失败!')
          }
        })
        .catch(() => { })
    }
    // 新增学科
    function addSubmit (val) {
      const data = val
      data.isFrontDisplay = val.isFrontDisplay ? '1' : '0'
      addSubject(data)
      console.log(data)
      getList()
      state.addDialogVisible = false
    }
    // 新增学科请求
    async function addSubject (val) {
      const res = await add(val)
      // console.log(res)
      if (res.status === 200) {
        ElMessage.success('添加成功!')
      } else {
        ElMessage.error('添加失败!')
      }
    }

    // 翻页功能
    const handleSizeChange = (val) => {
      // 事件名 size-change
      // page-size 每页显示条目个数，支持 v-model 双向绑定
      // page-size 改变时触发
      // console.log(`每页显示${val}条`)
      state.pageSize = val
      getList({ pagesize: val })
    }
    const handleCurrentChange = (val) => {
      // 事件名 current-change
      // current-page 当前页数，支持 v-model 双向绑定
      // current-page 改变时触发
      // console.log(`当前是第${val}页`)
      state.currentPage = val
      getList({ page: val })
    }

    // 学科分类
    function categoryRow (val) {
      // console.log(val.subjectName)
      router.push({
        name: 'subjects-directorys',
        query: {
          subjectName: val.subjectName
        }
      })
    }
    // 学科标签
    function tagRow (val) {
      router.push({
        name: 'subjects-tags',
        query: {
          subjectName: val.subjectName
        }
      })
    }
    // onMounted
    onMounted(() => {
      getList()
      // console.log(tableData.list)
      // console.log(router)
      // console.log(route.path)
    })

    return {
      ...toRefs(state),
      onSearch,
      deleteRow,
      editRow,
      editSubmit,
      addSubmit,
      delSearch,
      parseTimeByString,
      handleSizeChange,
      handleCurrentChange,
      categoryRow,
      tagRow,
      EditPen
    }
  }

}
</script>
<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-right: 15px;
}

.my-3 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mb-3 {
  margin-bottom: 15px;
}
</style>
